<template>
  <div class="box">
    <div id="form">

      <el-radio-group v-model="labelPosition"
                      size="small">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
      <div style="margin: 20px;"></div>
      <el-form :label-position="labelPosition"
               label-width="80px"
               :model="formLabelAlign">
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="formLabelAlign.newPwd1"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="formLabelAlign.newPwd2"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="danger"
                 plain
                 @click="submit">修改密码</el-button>
    </div>
  </div>
</template>

<script>
import { updatePassword } from '../../api/password'
export default {
  data () {
    return {
      cardNo: localStorage.getItem('cardNo'),
      labelPosition: 'right',
      formLabelAlign: {
        password: '',
        newPwd1: '',
        newPwd2: ''
      }
    };
  },
  methods: {

    async update () {
      let result = await updatePassword(this.cardNo, this.formLabelAlign.password.trim(), this.formLabelAlign.newPwd1.trim());
      if (result.updatePassword == "1" || result.updatePassword == 1) {
        this.$message({
          message: '密码修改成功,请记住您的密码：' + this.formLabelAlign.newPwd1,
          type: 'success',
          center: true,
          showClose: true
        });
        this.formLabelAlign = []
      }
    },


    submit () {
      if (this.formLabelAlign.password.trim() == '' || this.formLabelAlign.newPwd1.trim() == '' || this.formLabelAlign.newPwd2.trim() == '') {
        this.$message({
          message: '请完善所有信息！！！',
          center: true,
          type: 'error',
          showClose: true
        });
        return false;
      }
      if (this.formLabelAlign.newPwd1.trim() != this.formLabelAlign.newPwd2.trim()) {
        this.$message({
          message: '两次密码不一致！',
          center: true,
          type: 'error',
          showClose: true
        });
        return false;
      }
      this.update();
    }



  }

}
</script>

<style lang="less">
.box {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#form {
  text-align: center;
}
</style>